<template>
  <!-- 使用接收到的宽度和高度设置图表容器 -->
  <div ref="chart2" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

// 接收父组件传递的宽度和高度
const props = defineProps({
  width: {
    type: String,
    default: '400px'  // 默认宽度
  },
  height: {
    type: String,
    default: '500px'  // 默认高度
  }
});

let chart2 = ref();

onMounted(() => {
  chartInit()
})

function chartInit() {
  const myChart = echarts.init(chart2.value);
  // 绘制图表
  myChart.setOption({
    title: {
      text: '成绩雷达图'
    },
    legend: {
      data: ['全科成绩']
    },
    radar: {
      indicator: [
        { name: '语文', max: 150 },
        { name: '数学', max: 150 },
        { name: '英语', max: 150 },
        { name: '物理', max: 100 },
        { name: '化学', max: 100 },
        { name: '生物', max: 100 },
        { name: '历史', max: 100 },
        { name: '政治', max: 100 },
        { name: '地理', max: 100 }
      ]
    },
    series: [
      {
        name: '全科成绩',
        type: 'radar',
        data: [
          {
            value: [100, 120, 120, 70, 80, 90, 0, 0, 0],
            name: '全科成绩'
          }
        ]
      }
    ]
  });
}
</script>
